import PoolItem from '@/components/PoolItem.vue'
import { register } from '@antv/x6-vue-shape'
import PumpItem from '@/components/PumpItem.vue'
import ValveItem from '@/components/ValveItem.vue'
import BeginItem from '@/components/BeginItem.vue'
import EndItem from '@/components/EndItem.vue'
import { EdgeView, Graph, Point } from '@antv/x6'
import EmptyItem from '@/components/EmptyItem.vue'
import OtherItem from '@/components/OtherItem.vue'
import PipelineItem from '@/components/PipelineItem.vue'
import TextItem from '@/components/TextItem.vue'
import FlowMeter from '@/components/FlowMeter.vue'

register({
  shape: 'pool-item',
  height: 206,
  width: 172,
  component: PoolItem,
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})
register({
  shape: 'pump-item',
  height: 55,
  width: 76,
  component: PumpItem,
  data: {
    status: false
  },
  ports: {
    groups: {
      left: {
        position: {
          name: 'left',
          args: {
            dy: 16
          }
        },
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})
register({
  shape: 'valve-item',
  height: 42,
  width: 40,
  component: ValveItem,
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})
register({
  shape: 'empty-item',
  height: 10,
  width: 30,
  component: EmptyItem,
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})
register({
  shape: 'other-item',
  height: 30,
  width: 100,
  component: OtherItem
})
register({
  shape: 'pipeline-item',
  height: 30,
  width: 100,
  component: PipelineItem,
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})
register({
  shape: 'text-item',
  height: 30,
  width: 100,
  component: TextItem
})
register({
  shape: 'flow-meter',
  height: 42,
  width: 40,
  component: FlowMeter
})

register({
  shape: 'begin',
  height: 30,
  width: 238,
  component: BeginItem,
  ports: {
    groups: {
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})
register({
  shape: 'end',
  height: 30,
  width: 100,
  component: EndItem,
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#C2C8D5',
            strokeWidth: 1,
            fill: '#fff'
          }
        }
      }
    }
  }
})

Graph.registerEdge('pipeline', {
  inherit: 'edge',
  attrs: {
    line: {
      stroke: 'rgba(212,223,243,1)',
      targetMarker: null,
      strokeWidth: 16
    },
  },
  zIndex:-99
})

// 路由参数
interface RandomRouterArgs {
  bounces?: number
}

function randomRouter(vertices: Point.PointLike[], args: RandomRouterArgs, view: EdgeView) {
  const bounces = args.bounces || 20
  const points = vertices.map((p) => Point.create(p))
  console.log(vertices, points)

  // for (var i = 0; i < bounces; i++) {
  //   const sourceCorner = view.sourceBBox.getCenter()
  //   const targetCorner = view.targetBBox.getCenter()
  //   const randomPoint = Point.random(
  //     sourceCorner.x,
  //     targetCorner.x,
  //     sourceCorner.y,
  //     targetCorner.y,
  //   )
  //   points.push(randomPoint)
  // }

  const sourceCorner = view.sourceBBox.getCenter()
  const targetCorner = view.targetBBox.getCenter()
  console.log(sourceCorner, targetCorner)
  return points
}

Graph.registerRouter('random', randomRouter)
